<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div class="header">Header Content</div>
    <div class="image-container">
      <img :src="imageUrl" :style="imageStyle" alt="Scroll Down to Zoom" />
    </div>
    <div class="footer">Footer Content</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl:
        'https://img1.baidu.com/it/u=2695109698,372992270&fm=253&fmt=auto&app=138&f=JPEG?w=957&h=500',
      startScroll: 0,
      endScroll: 0,
      maxScale: 2.5, // 最大缩放比例
    }
  },
  computed: {
    imageStyle() {
      const scale = Math.min(
        1,
        (this.endScroll - this.startScroll) / (this.endScroll - this.startScroll)
      )
      return {
        transform: `scale(${scale})`,
      }
    },
  },
  methods: {
    handleScroll(event) {
      this.startScroll = 0 // 设定一个起始滚动位置
      this.endScroll = window.innerHeight // 设定一个结束滚动位置

      const currentScroll = event.target.scrollTop + window.innerHeight
      if (currentScroll > this.startScroll && currentScroll < this.endScroll) {
        // 计算当前位置在可视区域内的百分比
        const percent = (currentScroll - this.startScroll) / (this.endScroll - this.startScroll)
        // 应用最大缩放比例
        const scale = this.maxScale * percent
        this.imageStyle = { transform: `scale(${scale})` }
      }
    },
  },
}
</script>

<style>
.scroll-container {
  height: 100vh;
  overflow: auto;
  position: relative;
}

.image-container {
  position: sticky;
  top: 0;
  height: 200px; /* 图片初始高度 */
}

.image-container img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.header,
.footer {
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
